<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单计算器</title>
    <link rel="stylesheet" href="cal.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
    <div class="calculator">
        <div class="cal">
            <form action="#">
                <h1>简单计算器</h1>
                <div class="row">
                    数字一：<input type="text" id="c1">
                </div>                
                <div class="row">
                    数字二：<input type="text" id="c2">
                </div>
                <div class="option">
                    <input type="button" value="相加" onclick="add()" id="a">
                    <!-- id不能与函数重复，否则会误判 -->
                    <input type="button" value="相减" onclick="sub()" id="s">
                    <input type="button" value="相乘" onclick="mul()" id="m">
                    <input type="button" value="相除" onclick="div()" id="d">
                </div>
                <div class="clear">
                    <div class="reset">
                        <input type="reset" value="清空" id="up" onclick="update()">
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script>
        function add() {
            var numb1 = jQuery("#c1").val();
            var numb2 = jQuery("#c2").val();
            var sum = parseInt(numb1) + parseInt(numb2);
            jQuery("#a").val(sum);
        }
        function sub() {
            var numb1 = jQuery("#c1").val();
            var numb2 = jQuery("#c2").val();
            var sum = parseInt(numb1) - parseInt(numb2);
            jQuery("#s").val(sum);
        }
        function mul() {
            var numb1 = jQuery("#c1").val();
            var numb2 = jQuery("#c2").val();
            var sum = parseInt(numb1) * parseInt(numb2);
            jQuery("#m").val(sum);
        }
        function div() {
            var numb1 = jQuery("#c1").val();
            var numb2 = jQuery("#c2").val();
            var sum = parseFloat(numb1) / parseInt(numb2);
            jQuery("#d").val(sum);
        }
        function update() {
            jQuery("#a").val("相加");
            jQuery("#s").val("相减");
            jQuery("#m").val("相乘");
            jQuery("#d").val("相除");
        }

    </script>
</body>
</html>